{extend name='public/base' /}
<style type="text/css">

    .banjies {
        color: #ffffff;
        font-size: 14px;
        background-color: #2d8cf0;
        padding: 3px;
        width: 60px;
        border-radius: 5px;
        text-align: center;
        line-height: 24px;
        display: inline-block;
    }

    .tanchu {
        position: absolute;
        top: 170px;
        left: 440px;
        background-color: #fff;
        border: #ccc solid 1px;
        width: 1000px;
        border-radius: 10px;
    }
</style>
{block name="content"}

<div class="layui-col-md12">
    <div class="layui-card">

    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="table_id" lay-filter="table_id"></table>
            <div style="color: red;">*excel不能有计算</div>
        </div>
    </div>

</div>
<form class="layui-form" action="" lay-filter="form">
    <div class="tanchu" style="display: none;" id="tanchu">
        <div class="layui-form-item">
            <div class="layui-input-block" style="width: 100%;margin-left: 0 !important;">
                <table class="layui-hide" id="student_table" lay-filter="student_table"></table>
<!--                <div id="count" style="text-align: right;"></div>-->
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin " style="width: 100%">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0px;text-align: center;">
                    <button class="layui-btn" lay-submit="" lay-filter="add">{:__('Submit')}</button>
                    <button class="layui-btn" lay-submit="" lay-filter="qx">取消</button>
                </div>
            </div>
        </div>
    </div>

</form>
{/block}

{block name="js"} <!--js处理区-->


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button type="button" id="import" class="layui-btn  layui-btn-sm">导入</button>
    </div>
</script>
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="layui-btn  layui-btn-xs {:node('ExportCenter/add')}" data-title="新增"
       lay-event="add"><i class="layui-icon">&#xe642;</i></a>
</script>

<script type="text/html" id="operationTpl1">
    <a href="javascript:;" class="layui-btn  layui-btn-xs {:node('ExportCenter/edit')}" data-title="编辑"
       lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
</script>
<script>
    layui.use(['element', 'table', 'form', 'jquery', 'lucky', 'opTable', 'laydate', 'upload'], function () {
        var element = layui.element;
        var upload = layui.upload;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        var lucky = layui.lucky;
        var opTable = layui.opTable;
        form.render();
        laydate.render({
            elem: '#time'
            , type: 'date',
            range: '~',
            trigger: 'click'
        });
        var myTables = table.render({
            elem: '#table_id',
            url: "{:url('index')}",
            where: {info_type: 2},
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: [],
            id: 'table_id',
            cols: [],
        });
        var costType = [];
        var student_table = table.render({
            id: 'student_table',
            // toolbar: '#toolbarDemo1', //开启头部工具栏，并为其绑定左侧模板
            elem: '#student_table',
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [ 'count', 'prev', 'page', 'next', 'skip', 'last'] //自定义分页布局
                 ,groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , limit: 10000
            },
            cols: [[
                {field: 'company', title: '公司名称', width: 170,edit:'text'},
                {field: 'code', title: '合同号', width: 170,edit:'text'},
                {
                    title: '华立 老户号', field: 'userId',edit:'text', width: 170
                },
                {
                    title: '设备编号', field: 'pointId',edit:'text', width: 170
                },
                {
                    title: '设备名称', field: 'pointName',edit:'text', width: 150
                },
                {
                    title: '类型', field: 'type'
                },
                {
                    title: '月份', field: 'dataTime',edit:'text', width: 100
                },
                {
                    title: '倍率', field: 'rate',edit:'text', width: 50
                },
                {
                    title: '峰起始值', field: 'fengStart',edit:'text', width: 80
                },
                {
                    title: '峰止值', field: 'fengEnd',edit:'text', width: 80
                },
                {
                    title: '峰用电量', field: 'fengPower',edit:'text', width: 80
                },
                {
                    title: '谷起值', field: 'guStart',edit:'text', width: 80
                },
                {
                    title: '谷终值', field: 'guEnd',edit:'text', width: 80
                }
                ,
                {
                    title: '谷用电量', field: 'guPower',edit:'text', width: 80
                }
                ,
                {
                    title: '平起值', field: 'pingStart',edit:'text', width: 80
                }
                ,
                {
                    title: '平终值', field: 'pingEnd',edit:'text', width: 80
                }
                ,
                {
                    title: '平用电量', field: 'pingPower',edit:'text', width: 80
                }
            ]],
            data: costType
        });
        //导出
        $('#export').on('click', function () {
            var url = "{:url('export')}";
            window.open(url);
        });
        //导入
        upload.render({
            elem: '#import',
            url: "{:url('import')}",
            accept: 'file', //普通文件
            multiple: false,
            exts: 'xlsx|xls', // 限制文件类型为 xlsx或xls
            done: function (data) {  // 成功的回调函数
                console.log(data)
                if(data.code==1){
                    alert(data.msg);
                }
                // console.log('弹层该出现了')
                document.getElementById("tanchu").style.display = "block";
                var param = data.data.data
                console.log(param)
                student_table.reload({data: param});
                // $('#count').html('共'+data.data.count+'条')

            }
            , error: function (index, upload) {  // 失败的回调函数

            }
        });
        //导出时阻止页面刷新
        $(".layui-form").submit(function (e) {
            e.preventDefault();
        })
        /**
         * 关键词搜索树
         */
        form.on('submit(add)', function (data) {
            var datas = layui.table.cache["student_table"];
            data.field.datas = datas;
            // console.log(datas)
            var resdata = JSON.stringify(data.field);
            lucky.FormSubmit("{:url('add')}",resdata,true);
            // setTimeout(function(){
            //     window.location.reload();
            // },3000);
            return false;
        });
        form.on('submit(qx)', function (data) {
                window.location.reload();
            return false;
        });
    });

</script>

{/block}
